<template>
	<view class="page">
		<u-navbar title="版本服务" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view class="body">
			<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
				:default-page-no="1" :default-page-size="100">
				<template v-if="!loading">
					<view v-for="(item,index) in data" :key="item.id" class="PlatformItem " @click="jump(item.id)">
						<view class="titleBox">
							{{item.title}}
						</view>
						<view>
							<view>
								描述：{{item.description}}
							</view>
							<view style="display: flex;" v-if="!index&&item.privileges.length">
								<view>
									功能：
								</view>
								<view>
									<view v-for="(item2,index) in item.privileges" :key="index">
										{{item2.title}}
									</view>
								</view>
							</view>
							<view style="display: flex;" v-if="index">
								<view>
									功能：
								</view>
								<view>
									<view>
										包含{{data[index-1].title}}所有功能{{item.privileges.length?'以及':''}}
									</view>
									<view v-for="(item2,index) in item.privileges" :key="index">
										{{item2.title}}
									</view>
								</view>
							</view>
						</view>
						<view class="charge">
							<text>￥</text>
							<view>{{ item.expireds[0]?item.expireds[0].charge:'暂无' }}</view>
							<text>/月</text>
						</view>
					</view>
				</template>
				<template v-else>
					<view v-for="(item,index) in 5" :key="item" class="PlatformItem ">
						<view class=" Skeleton"  style="width: 128rpx;height: 128rpx;"/>
						<view>
							<view class=" Skeleton" style="height: 30rpx;margin-bottom: 20rpx;" v-for="item in 5"></view>
						</view>
						<view class="charge Skeleton" style="width: 100rpx;height: 30rpx;"/>
					</view>
				</template>
			</z-paging>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				data: []
			}
		},
		methods: {
			classType(index) {
				if (++index) return 'background1'
			},
			query(page, size) {
				let obj = {
					page,
					size
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api_company.Platform.List(obj).then(res => {
					uni.hideLoading()
					this.$refs.paging.completeByNoMore(res.data.roles, true)
					this.loading = false
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.message)
				})
			},
			jump(id) {
				this.$utils.navigateTo({
					url: '/pay/detail?id=' + id
				})
			}
		}
	}
</script>
<style scoped lang="less">
	.page {
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.body {
		flex: 1;
	}

	.PlatformItem {
		width: calc(100vw - 40rpx);
		margin: 20rpx auto;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 8rpx;
		box-shadow: 0 0 10rpx #ddd;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: start;

		>view:nth-child(2) {
			flex: 1;
			margin: 0 40rpx;
			font-size: 24rpx;
		}
	}

	.titleBox {
		font-size: 24rpx;
		line-height: 128rpx;
		text-align: center;
		color: rgba(255, 255, 255, 0.8);
		width: 128rpx;
		height: 128rpx;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.4);
		border-left: 1rpx solid rgba(255, 255, 255, 0.4);
		background: linear-gradient(to top right, rgba(90, 149, 207, 0.5), rgba(58, 76, 99, 0.8));
		-webkit-backdrop-filter: blur(6rpx);
		backdrop-filter: blur(6rpx);
		border-radius: 20rpx;
	}

	.charge {
		text-align: center;
		margin: 0 0 32rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		flex-direction: row;

		text:nth-child(1),
		text:nth-child(3) {
			font-size: 24rpx;
		}

		view:nth-child(2) {
			font-size: 30rpx;

		}
	}
</style>